<template>
    <div v-if="isshow" class="search">

        <div class="search-frame" v-loading="loading">
            <el-input style="height:4rem;font-size:1.7rem" :prefix-icon="Search" v-model="searchcontext"
                :placeholder="placeholder" @focus="focus" :style="inpstyle" @blur="blur" @change="startsearch"
                :maxlength="30">
            </el-input>
        </div>
        <!-- Flag -->
        <div class="Article">

            <div class="Context" v-if="searchList" v-for="item in searchList" :key="item.ID"
                @click="router.push(`/articleone/${item.ID}`)">
                <div style="position:relative;font-size: 1.8rem;letter-spacing: .15rem;">
                    {{item.article}}
                </div>
                <div style="padding-top:0.8rem;padding-left: .2rem;opacity: .75;font-family:'SimSun' 'FangSong';"
                    v-if="item.describe">
                    {{item.describe}}
                </div>
                <div style="position: absolute ; bottom:.9rem">
                    <span style="color:#22a2c3;">创建时间</span>
                    <span style="color:rgb(110, 72, 47)">：{{ item.CreatedAt}}</span>
                    <span v-if="item.UpdatedAt">&nbsp |
                        <span style="color:#12a182">最后更新</span>
                        <span>：{{ item.UpdatedAt }}</span>
                    </span>
                </div>
            </div>
            <div class="noting" v-if="notingshow">
                <div>这里什么也没。。。。。。</div>
            </div>
        </div>


    </div>
</template>

<!------------------------------>

<script setup lang="ts">
import {Search} from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia';
import {useCounterStore} from '../../stores/counter'
let isshow = ref<boolean>(false)
let global=getCurrentInstance()
const router=useRouter()
//Flag:
let loading=ref<boolean>(false)
//Flag:
let notingshow=ref<boolean>(false)
//Flag:
let placeholder=ref('Search blog')
//Flag:
let searchList=ref()
//Flag:
let searchcontext=ref()
//Flag
let inpstyle=ref()
//Flag
const focus=()=>{
    placeholder.value='Search blog'
    
}
const blur=()=>{} 
const startsearch=()=>{
    notingshow.value=false
    loading.value=true
    global?.proxy?.$axios.get(`/v1/searchblog/${searchcontext.value}`)
    .then((res :any)=>{
        if(res.data.status==200){
            if(!res.data.data){
                ElMessage.info({
                    showClose: true,
                    message:`未搜索到相关文章，请换个关键字重试 😪`,
                    center:true
                })
                searchList.value=null
                notingshow.value=true
                return 
            }
            searchList.value=res.data.data.map((item :any) => {
            item.CreatedAt = (item.CreatedAt as string).split("T").at(0)
            if ((item.UpdatedAt as string).includes("0001")) {
                item.UpdatedAt = null
            } else {
                item.UpdatedAt = (item.UpdatedAt as string).split("T").at(0)
            }
            return item
        })
        searchcontext.value=null
        placeholder.value='搜索结果🔰'
        }})
    .finally(()=>{
        loading.value=false
    })
}




//Flag:监听变化
let Store = useCounterStore()
let { Animation } = storeToRefs(Store)
watch(() => { return Animation.value }, () => {
    isshow.value = false
})
onMounted(() => {
    isshow.value=true
})
</script>

<!------------------------------>

<style scoped lang="scss">










.search{
    width:100vw;
    padding-top: 2.3rem;
    .search-frame{
        box-shadow:0 2px 4px rgb(5 10 15 / 5%),
        0 7px 13px -3px rgb(5 10 15 / 30%); 

        max-width: 67.5rem /* 1080px -> 67.5rem */;
        margin: 0 auto;
    }
}
.Article {
    margin:0 auto;
    max-width: 67.5rem /* 1080px -> 67.5rem */;
    padding-top: 3rem;
    .Context {
            cursor: pointer;
            padding-left: 1.2rem;
            padding-top: 1.1rem;
            padding-right: 1rem;
            padding-bottom: .9rem;
            position: relative;
            // margin-left: calc(25vw + 4rem);
            background-color: rgba(255, 255, 255, .7);
            height: 10rem
                /* 160px -> 10rem */
            ;
            box-shadow: 0 2px 4px rgb(5 10 15 / 5%), 0 7px 13px -3px rgb(5 10 15 / 30%);
            border-radius: .5rem;
            margin-bottom: 2rem;
        }
    .noting{
        cursor:default;
        opacity: .5;
        display: flex;
        justify-content: center;
        font-size: 1.7rem;
        padding-top: 1.7rem;
    }
}


</style>